<template>
  <img class="bg" src="./img/login.png" alt="" />
  <img class="logo" src="./img/loginlogo.png" alt="" />
  <div>
    <div class="loginInfo">
      <u--form labelPosition="left" labelWidth="200" :model="loginInfo">
        <u-form-item prop="phoneNum">
          <u-input
            v-model="loginInfo.phoneNum"
            border="none"
            type="number"
            placeholder="请输入手机号"
            placeholderStyle="font-size:28rpx;"
            maxlength="11"
          ></u-input>
        </u-form-item>

        <u-form-item labelWidth="0" prop="imgCode">
          <u-input
            v-model="loginInfo.kaptchaCode"
            border="none"
            placeholder="请输入图形验证码"
            placeholderStyle="font-size:28rpx"
          >
            <template #suffix>
              <div class="codeImg">
                <img class="img" @click="getImgCode" :src="imgUrl" alt="" />
              </div>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item prop="msgCode" customStyle="padding:0;height:44px">
          <u-input
            v-model="loginInfo.smsCode"
            border="none"
            placeholder="短信验证码"
            placeholderStyle="font-size:28rpx"
          >
            <template #suffix>
              <div class="getMsg" @click="getMsgCode">
                {{ msgCodeBtnText }}
              </div>
            </template>
          </u-input>
        </u-form-item>
      </u--form>
    </div>

    <div class="goLogin">
      <div class="radioArea">
        <u-radio-group placement="row" v-model="isAgree" @change="groupChange">
          <u-radio
            :name="true"
            size="28rpx"
            placement="row"
          >
          </u-radio>
        </u-radio-group>
        <div class="text" style="color: #666666; font-size: 24rpx">
          我已阅读并同意<span style="color: #406eb0"
            >《科技银行个人贷款微信小程序隐私政策》《科技银行个人贷款微信小程序服务协议》</span
          >
        </div>
      </div>
      <u-button
        :customStyle="
          utils.checkMobile(loginInfo.phoneNum) && !(loginLimit > 0)
            ? 'width:590rpx;height:88rpx;margin-top:120rpx;background-image:linear-gradient(to right,#619DF1,#4478C1);color:#fff;'
            : 'width:590rpx;height:88rpx;margin-top:120rpx;background-color:#A4C3F3;color:#fff;'
        "
        :disabled="isDisabled"
        text="登录"
        shape="circle"
        @click="goLogin"
      >
      </u-button>
    </div>
  </div>
  <div class="phoneUnused" @click="changePwd">手机号不再使用？</div>

  <up-modal
    width="500rpx"
    :show="isShowModal"
    content="小程序需要获取您的定位"
    confirmText="确定"
    showCancelButton
    cancelText="取消"
    @confirm="openLocationSetting"
    @cancel="isShowModal = !isShowModal"
  ></up-modal>
</template>

<script setup>
import * as http from "../../utils/http";
import * as utils from "../../utils/utils";
import config from "../../utils/config";
import { ref, reactive, onMounted } from "vue";
onMounted(() => {
  getImgCode();
});
const imgUrl = ref(""); // 图片的动态地址
/**
 * @Author: HaoyangDu@wits.com
 * @description: 获取图形验证码
 * @return {*}
 */
const getImgCode = () => {
  http
    .kaptcha()
    .then((res) => {
      imgUrl.value = "data:image/png;base64," + res.data;
    })
    .catch((res) => {
      wx.showToast({
        title: "获取验证码失败",
        mask: "true",
        icon: "none",
        duration: 1000,
      });
    });
};

const msgLimit = ref(0); // 获取短信验证码的冷却时间
const msgCodeBtnText = ref("获取验证码"); // 按钮文本
/**
 * @Author: HaoyangDu@wits.com
 * @description: 获取短信验证码
 * @return {*}
 */
const getMsgCode = () => {
  if (!msgLimit.value > 0) {
    if (utils.checkMobile(loginInfo.phoneNum)) {
      http
        .sendSmsCode({ custPhone: loginInfo.phoneNum })
        .then((res) => {
          msgLimit.value = 60;
          let timer = setInterval(() => {
            msgLimit.value--;
            msgCodeBtnText.value = msgLimit.value + "s";
            if (msgLimit.value < 0) {
              msgCodeBtnText.value = "获取验证码";
              clearInterval(timer);
              // msgLimit.value = 0;
            }
          }, 1000);
        })
        .catch((res) => {});
    } else {
      wx.showToast({
        title: "请您正确填写手机号",
        mask: "true",
        icon: "none",
        duration: 1000,
      });
    }
  }
};

const isShowModal = ref(false); // 模态框
const isAuthLocation = ref(false); // 是否授权定位
/**
 * @Author: HaoyangDu@wits.com
 * @description: 引导用户打开定位授权
 * @return {*}
 */
const openLocationSetting = () => {
  wx.getSetting({
    success: (res) => {
      if (res.authSetting && !res.authSetting["scope.userLocation"]) {
        wx.openSetting({
          success: (res) => {
            if (res.authSetting && res.authSetting["scope.userLocation"]) {
              isAuthLocation.value = true;
              wx.showToast({
                title: "您已授权小程序获取定位",
                icon: "none",
              });
              goLogin();
            } else {
              isShowModal.value = true;
            }
          },
        });
      } else {
        isAuthLocation.value = true;
      }
    },
  });
};

/**
 * @description: 引导定位授权
 * @param {type}
 * @return:
 * @Date Changed:
 */
const getLocationAuth = () => {
  wx.getSetting({
    success: (res) => {
      if (!res.authSetting["scope.userLocation"]) {
        wx.authorize({
          scope: "scope.userLocation",
          success: () => {
            isAuthLocation.value = true;
            goLogin();
          },
          fail: () => {
            isShowModal.value = true;
          },
        });
      } else {
        isAuthLocation.value = true;
        goLogin();
      }
    },
  });
};

const isAgree = ref(false); // 单选框是否勾选
const groupChange = (n) => {
  // 单选框勾选
  console.log('n-----', n);
  isAgree.value = n;
};
const loginLimit = ref(0); // 登录冷却
const isDisabled = ref(false); // 按钮是否被禁用
const loginInfo = reactive({
  // form信息
  phoneNum: "",
  imgCode: "",
  smsCode: "",
});
/**
 * @Author: HaoyangDu@wits.com
 * @description: 用户登录
 * @return {*}
 */
import { useAppStore } from "../../store/index";
const store = useAppStore();
const goLogin = () => {
  const { kaptchaCode, smsCode, phoneNum } = loginInfo;
  const custPhone = phoneNum;
  if (
    isAgree.value &&
    utils.checkMobile(custPhone) &&
    kaptchaCode &&
    smsCode.length == 6
  ) {
    if (!isAuthLocation.value) {
      getLocationAuth();
    } else {
      utils.getLocation().then((res) => {
        http
          .login({
            custPhone,
            kaptchaCode,
            smsCode,
            wxLocation: res,
          })
          .then((res) => {
            isDisabled.value = true;
            // 按钮文字倒计时
            loginLimit.value = 10;
            let timer = setInterval(() => {
              loginLimit.value--;
              if (loginLimit.value < 0) {
                loginLimit.value = 0;
                isDisabled.value = false;
                clearInterval(timer);
              }
            }, 1000);
            // 存储token
            if (res.data.token) {
              wx.setStorageSync("token", res.data.token);

              wx.setStorageSync("custPhone", res.data.custPhone);
              store.setCustPhone(res.data.custPhone);
              wx.setStorageSync("lastLoginTime", res.data.lastLoginTime);
              store.setLastLoginTime(res.data.lastLoginTime);
              //   跳转
              wx.switchTab({
                url: "../../pages/index/index",
              });
            }
          })
          .catch((err) => {});
      });
    }
  } else {
    wx.showToast({
      title: "请确认正确输入并勾选协议",
      mask: "true",
      icon: "none",
      duration: 1000,
    });
  }
};
const changePwd = () => {
  wx.navigateTo({
    url: "../updatePhone/updatePhone",
  });
};
</script>

<style scoped lang="scss">
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -99999;
}

.logo {
  width: 505rpx;
  height: 49rpx;
  position: absolute;
  left: 36rpx;
  top: 211rpx;
}

.loginInfo {
  padding-top: 479rpx;
  margin: 0 76rpx;

  .codeImg {
    width: 101rpx;
    height: 46rpx;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .getMsg {
    font-size: 24rpx;
    color: #406eb0;
    background-color: #e0e9fe;
    width: 153rpx;
    height: 52rpx;
    text-align: center;
    line-height: 52rpx;
    border-radius: 26rpx;
  }
}

.goLogin {
  margin-top: 59rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .radioArea {
    display: flex;
    align-items: center;
    margin: 0 80rpx;
  }
}

.phoneUnused {
  position: absolute;
  bottom: 56rpx;
  left: 50%;
  transform: translate(-50%);
  color: #666;
  font-size: 28rpx;
}
</style>
<style>
page {
  height: 100vh;
}
</style>
